<template>
    <div class="scrollbox">
        <!-- 头部 -->
        <v-header></v-header>
        <div class="dis10"></div>
        <div class="listbox aps9">
            <v-list
                    api="prometheus.job_list"
                    ref="list"
                    cards="1"
                    :params="params"
            >
                <template slot="search">
                    <el-button
                            v-if="userinfo.role != 'view'"
                            class="operate"
                            size="small"
                            type="primary"
                            icon="el-icon-plus"
                            @click="edit(params)"
                    >添加
                    </el-button>&nbsp;&nbsp;&nbsp;
                    <!--<el-button-->
                            <!--v-if="userinfo.role != 'view'"-->
                            <!--class="operate"-->
                            <!--size="small"-->
                            <!--type="primary"-->
                            <!--icon="el-icon-sort"-->
                            <!--@click="generate()"-->
                            <!--style="float: right"-->
                    <!--&gt;生成缓存-->
                    <!--</el-button>&nbsp;-->
                </template>
                <template slot="head" slot-scope="props">
                    <thead>
                    <tr class="tr">
                        <th class="c1">Job</th>
                        <th>路径</th>
                        <th>文件间隔</th>
                        <th>协议</th>
                        <th>间隔/超时</th>
                        <th>配置</th>
                        <th>状态</th>
                        <th v-if="userinfo.role != 'view'">操作</th>
                    </tr>
                    </thead>
                </template>
                <template slot="item" slot-scope="props">
                    <tr>
                        <td class="font-blue" @click="setBaseInfo(props.item)">
                            <a href="javascript:void(0)" class="font-blue f14">
                                <span v-if="!props.item.remark">-</span>
                                {{ props.item.remark }}<br>
                                <span class="font-gray2 f12" v-if="props.item.job_name">({{ props.item.job_name }})</span><br>
                                <span class="font-gray2 f12">[{{ props.item.job_type }}]</span>

                            </a>
                        </td>
                        <td class="font-gray2">{{ props.item.metrics_path || '-' }}</td>
                        <td class="font-gray2">
                            <span v-if="!props.item.refresh_interval">-</span>
                            {{props.item.refresh_interval}}
                        </td>
                        <td class="font-gray2">
                            {{props.item.scheme }}
                        </td>
                        <td class="font-gray2">
                            {{props.item.scrape_interval }}/{{props.item.scrape_timeout }}
                        </td>
                        <td class="font-gray2 ">
                            <span style="width:500px;display:block;word-break:break-all">{{ props.item.relabel_configs || '-' }} </span>
                        </td>
                        <td class="font-gray2">
                            <span v-if="props.item.status === 1" style="padding-left: 5px" title="开启">
                                <i class="el-icon-success" style="color: #009f3d"></i>
                            </span>
                            <span v-if="props.item.status === 0" style="padding-left: 5px" title="关闭">
                                <i class="el-icon-error" style="color: #f56c6c"></i>
                            </span>
                        </td>
                        <td v-if="userinfo.role != 'view'" >
                            <span style="width: 120px;display: inline-block">
                            <el-button
                                        size="mini"
                                        title="编辑"
                                        icon="el-icon-edit"
                                        type="primary"
                                        circle
                                        @click="edit(props.item)"
                                ></el-button>
                            <el-button
                                    size="mini"
                                    title="生成缓存"
                                    icon="el-icon-sort"
                                    circle
                                    @click="generate(props.item)"
                            ></el-button>
                            <el-button
                                    size="mini"
                                    title="删除"
                                    icon="el-icon-delete"
                                    type="danger"
                                    circle
                                    @click="del(props.item)"
                            ></el-button>
                            </span>

                        </td>
                    </tr>
                </template>
            </v-list>
        </div>

        <!-- 编辑 -->
        <el-dialog :title="editData.title" :visible.sync="editData.status" width="680px" top="7vh">
            <div class="dialogform">
                <el-form
                        :model="form"
                        :rules="rules"
                        ref="form"
                        label-width="120px"
                        label-position="right"
                        class="demo-ruleForm"
                >
                    <el-form-item  prop="job_name" class="line20">
                        <span slot="label" >
                            <span>Job</span> <br>
                            <span class="font-gray2 f12">(job_name)</span>
                        </span>
                        <el-input
                                :disabled="editData.id == 0?false:true"
                                v-model="form.job_name"></el-input>
                    </el-form-item>
                    <el-form-item class="line20">
                        <span slot="label" >
                            <span>备注</span> <br>
                            <span class="font-gray2 f12">(remark)</span>
                        </span>
                        <el-input
                                v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item  class="line20">
                        <span slot="label" >
                            <span>类型</span> <br>
                            <span class="font-gray2 f12">(job_type)</span>
                        </span>
                        <el-input v-model="form.job_type"></el-input>
                    </el-form-item>
                    <el-form-item label="路径" class="line20">
                        <span slot="label">
                            <span>路径</span> <br>
                            <span class="font-gray2 f12">(metrics_path)</span>
                        </span>
                        <el-input v-model="form.metrics_path"></el-input>
                    </el-form-item>
                    <el-form-item label="刷新频率" class="line20">
                        <span slot="label">
                            <span>文件间隔</span> <br>
                            <span class="font-gray2 f12">(refresh_interval)</span>
                        </span>
                        <el-input v-model="form.refresh_interval"></el-input>
                    </el-form-item>
                    <el-form-item label="配置" class="line20">
                        <span slot="label">
                            <span>配置</span> <br>
                            <span class="font-gray2 f12">(relabel_configs)</span>
                        </span>
                        <el-input type="textarea" :rows="4" v-model="form.relabel_configs"></el-input>
                    </el-form-item>
                    <el-form-item label="协议" class="line20">
                        <span slot="label">
                            <span>协议</span> <br>
                            <span class="font-gray2 f12">(scheme)</span>
                        </span>
                        <el-input v-model="form.scheme" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="间隔" class="line20">
                        <span slot="label">
                            <span>间隔</span> <br>
                            <span class="font-gray2 f12">(scrape_interval)</span>
                        </span>
                        <el-input v-model="form.scrape_interval" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="超时" class="line20">
                        <span slot="label">
                            <span>超时</span> <br>
                            <span class="font-gray2 f12 ">(scrape_timeout)</span>
                        </span>
                        <el-input v-model="form.scrape_timeout" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio v-model="form.status" :label="1">开启</el-radio>
                        <el-radio v-model="form.status" :label="0">关闭</el-radio>
                    </el-form-item>
                    <el-form-item label prop="inlock">
                        <el-button type="primary" @click="save">保 存</el-button>
                        <el-button @click="editData.status = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="tc"></div>
        </el-dialog>
        <!-- 编辑结束 -->
        <!-- 详情开始 -->
        <v-baseinfo v-model="drawer.show" >
            <div class="wrapper-content" v-if="drawer.data" slot="user/list">
                <div class="content-item">
                    <span class="label wid120">
                        Job<br>
                        (job_name)：
                    </span>
                    <span class="value">{{drawer.data.job_name || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        备注<br>
                        (remark)：
                    </span>
                    <span class="value">{{drawer.data.remark || '-'}}</span>
                </div>

                <div class="content-item">
                    <span class="label wid120">
                        类型<br>
                        (job_type)：
                    </span>
                    <span class="value">{{drawer.data.job_type || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        路径<br>
                        (metrics_path)：
                    </span>
                    <span class="value">{{drawer.data.metrics_path || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        文件间隔<br>
                        (refresh_interval)：
                    </span>
                    <span class="value">{{drawer.data.refresh_interval || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        协议<br>
                        (scheme)：
                    </span>
                    <span class="value">{{drawer.data.scheme || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        间隔<br>
                        (scrape_interval)：
                    </span>
                    <span class="value">{{drawer.data.scrape_interval || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        超时<br>
                        (scrape_timeout)：
                    </span>
                    <span class="value">{{drawer.data.scrape_timeout || '-'}}</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        状态<br>
                        (status)：
                    </span>
                    <span class="value" v-if="drawer.data.status === 1">开启</span>
                    <span class="value" v-if="drawer.data.status === 0">关闭</span>
                </div>
                <div class="content-item">
                    <span class="label wid120">
                        配置<br>
                        (relabel_configs)：
                    </span>
                    <span class="value" style="width: 400px ;word-break:break-all">{{drawer.data.relabel_configs || '-'}}</span>
                </div>
            </div>
        </v-baseinfo>
        <!-- 详情结束 -->
    </div>
</template>
<script>
  import {cacheUserinfo} from "@cache";

  export default {
    data () {
      return {
        form: {
          id: 0,
          job_name: "",
          remark:'',
          job_type: "",
          metrics_path: "",
          refresh_interval: "",
          relabel_configs: "",
          scheme: "",
          scrape_interval: "",
          scrape_timeout: "",
          status: 1
        },
        editData: {
          status: false,
          title: "",
          id: 0
        },
        rules: {
          job_name: [
            {
              type: "string",
              required: true,
              message: "请输入Job",
              trigger: "blur"
            },
            { min: 1, message: "密码不能为空", trigger: "blur" }
          ]
        },
        drawer: {
          show: false,
          data: {},
          name: "采集任务"
        },
        purMenu: [],
        params: {},
        userinfo: {},
        loading: false
      };
    },
    watch: {
      "drawer.show": {
        handler (newV) {
          if (!newV) {
            this.drawer.data = null;
            this.purMenu = [];
          }
        }
      }
    },
    methods: {
      edit (item) {
        console.log(item)
        if (JSON.stringify(item) === '{}') {
          this.editData.title = '添加任务'
        } else {
          this.editData.title = '修改任务'
        }
        // console.log(this.form)
        this.editData.status = true;
        this.editData.id = item.id || 0;
        this.form.id = item.id || 0;
        this.form.job_name = item.job_name || "";
        this.form.job_type = item.job_type || "";
        this.form.metrics_path = item.metrics_path || "";
        this.form.refresh_interval = item.refresh_interval || "";
        this.form.relabel_configs = item.relabel_configs || "";
        this.form.scheme = item.scheme || "";
        this.form.scrape_interval = item.scrape_interval || "";
        this.form.scrape_timeout = item.scrape_timeout || "";
        this.form.status = item.status === 0 ? 0 : 1;
        this.form.remark = item.remark || "";
      },
      save () {
        let that = this;
        that.$refs["form"].validate(valid => {
          if (valid) {
            let url = "prometheus.job_save";
            that.$api.jpost(url, that.form).then(res => {
              if (res.status === 1) {
                this.$success(res.msg);
                that.$refs.list.fetchData();
                that.editData.status = false;
              } else {
                that.$error(res.msg);
              }
            }).catch(() => {});
          }
        });
      },
      del (item) {
        let that = this;
        let arr = []
        arr.push(item.id)
        that
            .$confirm("此操作会将该job彻底删除，不可恢复, 是否继续?", "删除提醒")
            .then(() => {
              that.$api
                  .jpost("prometheus.job_remove", arr)
                  .then(res => {
                    if (res.status === 1) {
                      that.$success(res.msg);
                      that.$refs.list.fetchData();
                    } else {
                      that.$error(res.msg);
                    }
                  }).catch(() => {});
            })
            .catch(() => {
            });
      },
      setBaseInfo (item) {
        this.drawer.data = item;
        // this.drawer.name = item.job_name
        this.drawer.show = true;
      },
      // 生成配置
      generate (item) {
        let that = this
        this.$api.get("prometheus.job_refresh",{job_name:item.job_name}).then(res => {
          if (res.status === 1) {
            that.$success(res.msg);
            that.$refs.list.fetchData();
          } else {
            that.$error(res.msg);
          }
        }).catch(() => {});
      }
    },
    mounted () {
      this.userinfo = cacheUserinfo.load()
    }
  };
</script>

<style lang="scss" scoped>
    .tabs {
        width: 290px;
    }

    .line20 /deep/ .el-form-item__label {
        line-height: 20px !important;
    }

    .wid120 {

        width: 120px !important;
    }
</style>
